<template>
  <div class="m-5">
    <n-card class="rounded-2xl " v-if="info&&databaseStore.getDd(key)?.available">
      <n-row>
        <n-col :span="12">
          <n-statistic label="版本">
            {{ info['redis_version'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="运行模式">
            {{ info['redis_mode'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="端口">
            {{ info['tcp_port'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="运行天数">
            {{ info['uptime_in_days'] }}
            <template #suffix>
              天
            </template>
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="已用内存量">
            {{ info['used_memory_human'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="key数量">
            {{ info['keyCount'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="已连接客户端数量">
            {{ info['connected_clients'] }}
          </n-statistic>
        </n-col>
        <n-col :span="12">
          <n-statistic label="最大客户端连接数量">
            {{ info['maxclients'] }}
          </n-statistic>
        </n-col>
      </n-row>
    </n-card>
    <div v-if="!databaseStore.getDd(key)?.available" class="pt-5 ">
      <n-button @click="handleReConnect" type="primary" size="large" block>重新连接</n-button>
    </div>
    <div class="pt-5 space-y-5">
      <n-button v-if="databaseStore.getDd(key)?.available" @click="handleDisConnect" type="warning" size="large" block>
        断开连接
      </n-button>
      <n-button v-if="info" @click="handleDelete" type="error" size="large" block text>删除</n-button>
    </div>
  </div>
  <DatabaseConnectModal @onConnect="onConnect" ref="connectModalRef"></DatabaseConnectModal>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {useDatabaseStore} from "@/store";
import DatabaseConnectModal from "@/components/modal/DatabaseConnectModal.vue";
import api from "@/api";

const databaseStore = useDatabaseStore()
const route = useRoute()


const connectModalRef = ref()
const key = ref(route.params.key)
const info = ref()


onMounted(() => {
  info.value = databaseStore.getDd(key.value)?.info
  getKeyCount()
})

const onConnect=(value:any)=>{
  info.value=value
  getKeyCount()
}
const getKeyCount = () => {
  if (info.value) {
    let totalKeys = 0;
    let str = ''
    for (let i = 0; i < 16; i++) {
      let key = `db${i}`
      str += info.value[key]
    }
    const regex = /keys=(\d+)/g;
    let match;
    while (match = regex.exec(str)) {
      totalKeys += parseInt(match[1]);
    }
    info.value['keyCount'] = totalKeys
  }
}

const handleReConnect = () => {
  connectModalRef.value.doParamsShow({
    host: key.value.toString().split(":")[0],
    port: key.value.toString().split(":")[1],
  })
}
const handleDisConnect = () => {
  window.$dialog.warning({
    title: '确定要断开吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.redis.disConnect({
        name: key.value
      }).then(() => {
        info.value = null
        databaseStore.errorDb(key.value)
      })
    }
  })
}
const handleDelete = () => {
  window.$dialog.error({
    title: '确定要删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.redis.disConnect({
        name: key.value
      }).then(() => {
        info.value = null
        databaseStore.removeDb(key.value)
      })
    }
  })
}

</script>

<style scoped>

</style>